<template>
  <el-dropdown trigger="click" @command="handleSetSize">
    <div>
      <el-tooltip content="布局大小" effect="dark" placement="bottom">
        <div class="size-icon">
          <el-icon><Rank /></el-icon>
        </div>
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/store/app'
import { ElMessage } from 'element-plus'
import { Rank } from '@element-plus/icons-vue'

const appStore = useAppStore()

const size = computed(() => appStore.size)

const sizeOptions = [
  { label: '默认', value: 'default' },
  { label: '中等', value: 'medium' },
  { label: '小型', value: 'small' },
  { label: '迷你', value: 'mini' }
]

function handleSetSize(size) {
  appStore.setSize(size)
  refreshView()
  ElMessage({
    message: '切换布局大小成功',
    type: 'success'
  })
}

function refreshView() {
  // 强制刷新界面，可以在实际应用中根据需要调整实现方式
  document.title = document.title
}
</script>

<style lang="scss" scoped>
.size-icon {
  font-size: 18px;
  vertical-align: middle;
}
</style> 